day5 - 表單的介紹與meta網頁設定 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2019 iT 邦幫忙鐵人賽

DAY 5

自我挑戰組

從零開始的基礎網站開發系列第 6 篇

day5 - 表單的介紹與meta網頁設定

2019鐵人賽

呆呆小將

2018-10-12 22:54:16

1764 瀏覽

分享至

正文開始:
在這大數據的時代當中表單的存在將是無法替代的一部份，表單有助於去分析了解一個人的行為和思考方式，話不多說，就讓我們進入html的表單吧。

 <body>
    <form action="URL" method="get/post">
    </form>
 <body>

form先向瀏覽器宣告我們要建立表單，透過action傳遞到需要接收資料的地方，也就是網站後台(若有興趣可以先去接觸psp相關課程了解)，method屬性會檢視我們對表單的變動，若是使用get參數那變動會直接加入在網址最後方，速度雖快但安全性低，而post則是會將值透過http標頭傳送，安全性較高只是需要多經過http協定，method屬性默認為get。

 <body>
    <form action="URL" method=get>
       <label for="InputText">文字輸入框
       <input id="InputText" type="text" name="one" />
       </label>
    </form>
 </body>

id為所有標籤都具有的屬性，它提供了一個去識別標籤的方式，我們可以透過屬性偽標籤取名，相似的屬性為class，id為表單的身分證，具有唯一性，而class並不具有唯一性，適當的使用這兩個屬性會提高網頁後台的可讀性。
label標籤內必須加入for屬性，for屬性內的值將會填入所需掛鉤的表單id，當使用者點選到此標籤時將會自動聚焦到所掛勾的表單，所有表單應加入此屬性以方便使用者填寫表單，以上面代碼為例子:當使用者點選"文字輸入框"這五個字時將會自動聚焦到InputText此表單。
input標籤為所有表單的基礎，透過後面的type屬性告知瀏覽器所使用的控制項，text參數代表此表單為文字輸入框。
name屬性註明了此標籤的名稱，將會和表單內容一起傳送到後台。

 <input type="password" />
 <input type="file" value="upload" />
 <input type="submit" value="submit" />
 <input type="image" src="URL" />
 <input type="date" />
 <input type="email" />
 <input type="search">

password為一特別的文字輸入框，它提供了密碼遮罩，將你輸入的內容更改成預設的*字號
file提供了一個檔案上傳按鈕，value屬性的內容將會顯示在按鈕當中
submit為送出按鈕，它會將表單內容傳送到服務器中
image一樣為送出按鈕，但你可以透過src來將選定的照片當作按鈕
date提供了一個日期輸入器
email會檢查使用者所輸入的內容是否為有效的email格式
search將會透過js來對網頁內容進行搜索

 <input type="radio" name="RadioButton" value="one" checked="checked" />one
 <input type="radio" name="RadioButton" value="two" />two
 <input type="radio" name="RadioButton" value="three" />three

radio提供了一組單選按鈕，透過相同的name分群，其後的文字將會顯示在按鈕旁，checked屬性會設定預設此組單選鈕的預設值，表單送出後只會得到所選value的值

 <input type="checkbox" name="CheckboxButton" value="one" checked="checked" />one
 <input type="checkbox" name="CheckboxButton" value="two" />two
 <input type="checkbox" name="CheckboxButton" value="three" checked="checked" />three
 <input type="checkbox" name="CheckboxButton" value="four" checked="checked" />four

checkbox為勾選框，其運作跟單選紐類似，只是其能選擇的選項為複數

以上為常見input標籤的各種型態，除了input以外還有其他標籤一樣為表單控制項

 <textarea>hey guys</textarea>

textarea為一文字區塊，其標籤內的文字將會出現在文字區塊當中

 <select>
    <option value="one">one</option>
    <option value="two">two</option>
    <option value="three">three</option>
 </select>

select提供了一個下拉式清單，通過option標籤建立選項，我們可以進行一蝦修改讓其支援多重選擇

 <select multiple="multiple">
    <option value="one">one</option>
    <option value="two">two</option>
    <option value="three">three</option>
 </select>

增加了multiple屬性會使夏拉式清單可以進行多重選擇，在使用前建議查詢瀏覽器是否支援

 <button><img src="URL" alt="">button</button>

button會建立一個可以點選的按鈕，我們可以在其中建立一img標籤來增加影像，達成影像和文字的結合

表單內容到此告一段落，接下來是我們在第二天提到過的meta，它提供的是有關於網頁本身的設定，除了字元編碼我們常用到地方還有很多

 <head>
    <meta name="description" content="hello" />
    <meta name="keywords" content="one, two, three" />
    <meta name="robots" content="nofollow">
    <meta http-equiv="author" content="qw050123">
    <meta http-equiv="pragma" content=" no-cache">
 </head>

此處的name是用來指定所需要設定的特性，透過cintent來進行描述
description為網頁介紹
keyword為提供給搜索引擎的關鍵字
robots給予一個是否會被搜索引擎搜尋到的選擇
http-equiv="author"為網頁作者
http-equiv="prama"為是否讓他人建立快取以便下次進入

html的內容到此告一段落，明天會開始學習CSS的相關知識，由於CSS是一門龐大的課程因此不會介紹的過於詳細，如有問題歡迎私信討論。